package com.example.newproject_overseas.Screen


import android.annotation.SuppressLint
import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.HorizontalAlignmentLine
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.newproject_overseas.R
import com.example.newproject_overseas.ViewModel.LoginViewModel
import com.example.newproject_overseas.ViewModel.OcrDetailViewModel
import com.example.newproject_overseas.compositionLocal.LocalUserViewModel
import com.google.accompanist.insets.ProvideWindowInsets
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@SuppressLint("UnrememberedMutableState")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Login(navController: NavHostController) {

    //将 注册好的数据 带过来 并且赋给名称LoginViewodel
    var loginVM = LocalUserViewModel.current

    var coroutineScope = rememberCoroutineScope()

    /*
     * 倒计时 60 秒 准备的 变量
     */
    var countdown by remember { mutableStateOf(60) }
    var isCountingDown by remember { mutableStateOf(false) }




    Column(modifier = Modifier.background(Color.White)) {




        Box() {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(260.dp),
                contentScale = ContentScale.FillBounds,
                painter  = painterResource(id = R.drawable.login_back),
                contentDescription = null,

                )
            Text(
                text = "Welcome to login",
                fontSize = 25.sp,
                textAlign = TextAlign.Start,
                fontWeight = FontWeight.ExtraBold,
                color = Color.White,
                modifier = Modifier.padding(top = 33.dp, start = 7.5.dp)
            )
            Image(
                painter = painterResource(id = R.drawable.login_back_img),
                contentDescription = null,
                modifier = Modifier
                    .padding(top = 65.5.dp)
                    .width(300.dp)
                    .height(230.dp)

                    .scale(0.9f)
                    .align(Alignment.Center)
            )
        }

        Column(modifier = Modifier
            .padding(start = 8.dp)

        ) {

            //电话的textfiled
            Row(verticalAlignment = Alignment.CenterVertically) {
                Surface() {
                    TextField(
                        value = loginVM.LoginPagePhoneNumber,
                        onValueChange = {
                            loginVM.LoginPagePhoneNumber = it
                        },
                        modifier = Modifier
                            .padding(top = 10.dp, bottom = 10.dp, end = 10.dp)
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(20.dp)),
                        textStyle = TextStyle(
                            fontSize = 20.sp, // 设置输入文字的大小
                            fontWeight = FontWeight.Bold // 设置输入文字的字体粗细
                        ),
                        colors = TextFieldDefaults.textFieldColors(
                            focusedIndicatorColor = Color.Transparent, // 设置聚焦状态下的边框颜色为透明
                            unfocusedIndicatorColor = Color.Transparent, // 设置非聚焦状态下的边框颜色为透明
                            disabledIndicatorColor = Color.Transparent, // 设置禁用状态下的边框颜色为透明

                        ),
                        //设置默认展示的文字
                        placeholder = {
                            Text(
                                "Phone Number",
                                color = Color(0xFF999999),
                                modifier = Modifier
                                    .align(alignment = Alignment.CenterVertically)
                                    .padding(top = 4.dp)
                            )
                        },
                        leadingIcon = { //添加图标
                            Icon(
                                painter = painterResource(id = R.drawable.phone),
                                contentDescription = null,
                                modifier = Modifier
                                    .size(30.dp)
                                    .padding(start = 8.dp)
                            )
                        },
                        keyboardOptions = KeyboardOptions.Default.copy(
                            imeAction = ImeAction.Done,
                            keyboardType = KeyboardType.Number,
                        ),
                    )
                }

            }



            //验证码的textfiled
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                TextField(
                    value = loginVM.Verificationcode,
                    onValueChange = {
                        loginVM.Verificationcode = it
                    },
                    modifier = Modifier
                        .weight(1f)
                        .padding(top = 10.dp, bottom = 10.dp, end = 10.dp)
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(20.dp)),
                    textStyle = TextStyle(
                        fontSize = 20.sp, // 设置输入文字的大小
                        fontWeight = FontWeight.Bold // 设置输入文字的字体粗细
                    ),
                    colors = TextFieldDefaults.textFieldColors(
                        focusedIndicatorColor = Color.Transparent, // 设置聚焦状态下的边框颜色为透明
                        unfocusedIndicatorColor = Color.Transparent, // 设置非聚焦状态下的边框颜色为透明
                        disabledIndicatorColor = Color.Transparent, // 设置禁用状态下的边框颜色为透明

                    ),
                    //设置默认展示的文字
                    placeholder = {
                        Text(
                            "Verification Code",
                            color = Color(0xFF999999),
                            modifier = Modifier
                                .align(alignment = Alignment.CenterVertically)
                                .padding(top = 4.dp)
                        )
                    },
                    //左侧图标
                    leadingIcon = { //添加图标
                        Icon(
                            painter = painterResource(id = R.drawable.verificationcode),
                            contentDescription = null,
                            modifier = Modifier
                                .size(30.dp)
                                .padding(start = 8.dp)
                        )
                    },
                    //右侧图标
                    trailingIcon = {
                        Button(
                            onClick = {
                                if (!isCountingDown) {
                                    isCountingDown = true
                                    coroutineScope.launch {
                                        repeat(60) {
                                            countdown = 60 - it
                                            delay(1000)
                                        }
                                        isCountingDown = false
                                    }
                                }
                            },
                            modifier = Modifier.padding(end = 20.dp),
                            colors = ButtonDefaults.buttonColors(
                                containerColor = Color(0xffFFCC00),
                                contentColor = Color.White
                            ),
                        ) {
                            if (isCountingDown) {
                                Text(text = "Countdown: $countdown s")
                            } else {
                                Text(text = "OPT")
                            }
                        }
                    },
                    //设置只能输入数字
                    keyboardOptions = KeyboardOptions.Default.copy(
                        imeAction = ImeAction.Done,
                        keyboardType = KeyboardType.Number,
                    ),
                )
            }
            Spacer(modifier = Modifier.height(30.dp))
            //登陆按钮
            Row() {


                Button(
                    onClick = {
                        coroutineScope.launch {
                            //登录逻辑处理
                            loginVM.loginLogic(navController)
                        }
                     },
                    enabled = loginVM.RadioButtonValue,
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color(0xffFFCC00),
                        contentColor = Color.White
                    ),
                    modifier = Modifier
                        .padding(end = 8.dp)
                        .height(46.5.dp),
                    shape = RectangleShape //设置形状为矩形
                ) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Text(
                            text = "Login",
                            modifier = Modifier.weight(1f),
                            textAlign = TextAlign.Center,
                            fontSize = 20.5.sp,
                        )
                    }
                }
            }
            //用户协议
            Row() {
                Box() {
                    RadioButton(
                        selected = (loginVM.RadioButtonValue),
                        onClick = { loginVM.RadioButtonValue = !loginVM.RadioButtonValue },
                        colors = RadioButtonDefaults.colors(
                            selectedColor = Color.Transparent, // 选中时的颜色
                            unselectedColor = Color.Gray // 未选中时的颜色
                        )
                    )
                    if (loginVM.RadioButtonValue) {
                        Image(
                            painter = painterResource(R.drawable.radiobutto),
                            contentDescription = "Selected",
                            modifier = Modifier
                                .padding(start = 10.dp, top = 10.dp)
                                .size(30.dp)
                        )
                    }
                }
                Row() {
                    ClickableText(text = loginVM.annotatedString,
                        modifier = Modifier.padding(top = 10.dp, end = 10.dp),
                        onClick = { offset ->
                            // 点击事件触发后的逻辑处理 判断点击的子 是不是黄色的
                            if (offset in 27..75) { // 点击范围在 "clickable" 之内
                                Log.i("====","${offset}")

                            }
                        })

                }
            }
        }
    }

    if (loginVM.loading.value) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Transparent),
            contentAlignment = Alignment.Center
        ) {

            CircularProgressIndicator()
        }
    }

}


@Preview
@Composable
fun LoginPreview() {
    val navController = rememberNavController() // 假设这里使用了导航控制器
    Login(navController)
}



